<template>
  <div class="text-to-comic">
    <textarea v-model="text" placeholder="输入你想转换成漫画的文本..."></textarea>

    <div class="style-selector">
      <label>选择风格:</label>
      <select v-model="selectedStyle">
        <option v-for="style in styles" :value="style" :key="style">
          {{ style }}
        </option>
      </select>
    </div>

    <button @click="generateComic" :disabled="isGenerating">
      {{ isGenerating ? '生成中...' : '生成漫画' }}
    </button>


    <div v-if="description.length >= 0" class="默认风格" v-for="(url, index) in image_urls">
      <p class="description">{{ description[index] }}</p>
      <div class="comic-panels">
        <img
            :key="index"
            :src="url"
            alt="漫画面板">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

const completions_url = `/compatible-mode/v1/chat/completions`
const image_synthesis_url = '/api/v1/services/aigc/text2image/image-synthesis'

export default {
  data() {
    return {
      text: '',
      selectedStyle: '默认风格',
      styles: [
        '默认风格', '少年漫画', '少女漫画', '青年漫画', 'Q版漫画'
      ],
      isGenerating: false,
      image_urls: [],
      description: []
    }
  },
  computed: {},
  methods: {
    async generateComic() {
      if (!this.text.trim()) {
        alert('请输入文本内容');
        return;
      }
      this.image_urls = []
      this.description = []

      this.isGenerating = true;

      try {
        const response = await axios.post(
            completions_url,
            {
              text: this.text
            },
            {
              headers: {
                'Content-Type': 'application/json'
              }
            }
        );
        const descriptions = response.data.descriptions

        let prompts = ""
        for (let i = 0; i < descriptions.length; i++) {
          const prompt = descriptions[i]
          prompts = prompts + "\n" + `第${i + 1}个画面：` + prompt + "\n"
        }

        for (let i = 0; i < descriptions.length; i++) {
          this.description.push(descriptions[i]);

          const prompt = descriptions[i] + `现在绘制第${i + 1}个画面`


          const imageResp = await axios.post(
              image_synthesis_url,
              {
                prompt: prompt,
                style: 'anime',
              },
              {
                headers: {
                  'Content-Type': 'application/json',
                }
              }
          );
          const url = await imageResp.data.url;
          this.image_urls.push(url)
        }
      } catch (error) {
        console.error('生成漫画失败:', error);
        alert(error)
      } finally {
        this.isGenerating = false;
      }
    }
  }
}
</script>

<style scoped>
.text-to-comic {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 150px;
  margin-bottom: 15px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.style-selector {
  width: 100%;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.style-selector label {
  margin-bottom: 5px;
  font-weight: bold;
}

.style-selector select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 12px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.results {
  width: 100%;
  margin-top: 20px;
}

.comic-panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  width: 100%;
}

.comic-panels img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.description {
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .comic-panels {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .comic-panels {
    grid-template-columns: 1fr;
  }

  textarea {
    height: 120px;
  }
}
</style>